<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>权限管理</title>
    <!-- HTML5 Shim and Respond.js IE9 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Phoenixcoded">
    <meta name="keywords"
          content=", Flat ui, Admin , Responsive, Landing, Bootstrap, App, Template, Mobile, iOS, Android, apple, creative app">
    <meta name="author" content="Phoenixcoded">
    <!-- Favicon icon -->
    <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">
    <!-- Google font-->
    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">-->
    <!-- Required Fremwork -->
    <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/css/bootstrap.min.css">
    <!-- themify icon -->
    <link rel="stylesheet" type="text/css" href="/assets/icon/themify-icons/themify-icons.css">
    <!-- ico font -->
    <link rel="stylesheet" type="text/css" href="/assets/icon/icofont/css/icofont.css">
    <!-- flag icon framework css -->
    <link rel="stylesheet" type="text/css" href="/assets/pages/flag-icon/flag-icon.min.css">
    <!-- Menu-Search css -->
    <link rel="stylesheet" type="text/css" href="/assets/pages/menu-search/css/component.css">
    <!-- Horizontal-Timeline css -->
    <link rel="stylesheet" type="text/css" href="/assets/pages/dashboard/horizontal-timeline/css/style.css">
    <!-- amchart css -->
    <link rel="stylesheet" type="text/css" href="/assets/pages/dashboard/amchart/css/amchart.css">
    <!-- flag icon framework css -->
    <link rel="stylesheet" type="text/css" href="/assets/pages/flag-icon/flag-icon.min.css">
    <!-- Style.css -->
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
    <!--color css-->
    <!-- Date-time picker css -->
    <link rel="stylesheet" type="text/css" href="/assets/pages/advance-elements/css/bootstrap-datetimepicker.css">
    <!-- Date-range picker css  -->
    <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap-daterangepicker/css/daterangepicker.css" />
    <!-- Date-Dropper css -->
    <link rel="stylesheet" type="text/css" href="/bower_components/datedropper/css/datedropper.min.css" />
    <!-- Data Table Css -->
    <link rel="stylesheet" type="text/css" href="/bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/pages/data-table/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">

    <link rel="stylesheet" type="text/css" href="/assets/css/linearicons.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/simple-line-icons.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/ionicons.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/jquery.mCustomScrollbar.css">
    <!-- pages -->
    <link rel="stylesheet" href="/assets/css/element.css">
    <link rel="stylesheet" href="/assets/css/common.css">
</head>
<body>
<!-- Pre-loader start -->
	<div class="theme-loader">
	</div>
	<!-- Pre-loader end -->
<!-- Menu header start -->
<div id="pcoded" class="pcoded">
    <div class="pcoded-overlay-box"></div>
    <div class="pcoded-container navbar-wrapper">
        <div id="topBar"></div>
        <div class="pcoded-main-container">
            <div class="pcoded-wrapper">
                <!-- nav -->
                <div id="sidebarNavbar"></div>
                <div class="pcoded-content">
                    <div class="pcoded-inner-content">
                        <!-- main start -->

                        <div class="main-body" id="permissions">
                            <div class="page-wrapper">
                                <!-- Page-header start -->
                                <div class="page-header">
                                    <div class="page-header-title">
                                        <h4>权限管理</h4>
                                        <span>权限管理......</span>
                                    </div>
                                    <div class="page-header-breadcrumb">
                                        <ul class="breadcrumb-title">
                                            <li class="breadcrumb-item"><a href="../index.html"> <i
                                                    class="icofont icofont-home"></i>
                                            </a></li>
                                            <li class="breadcrumb-item"><a href="#!">系统设置</a></li>
                                            <li class="breadcrumb-item"><a href="#!">权限管理</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- Page-header end -->
                                <!-- Page-body start -->
                                <div class="page-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="card table-1-card">
                                                <div class="card-block">
                                                    <div class="card-header">
                                                        <h5>角色列表</h5>
                                                        <div class="button">
                                                            <button class="btn btn-round btn-success" @click="addCharacter">
                                                                <i class="icofont icofont-ui-add"></i>新建角色
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <ul class="roleUl">
                                                            <li v-for="(character, index) in characterLists"
                                                                :class="characterCurrentIndex === index ? 'active':''"
                                                                @click="editPermissions(index,character.id)">
                                                                <el-input v-model="editCharacter.text"
                                                                          v-if="character.id === nowEditCharacter"></el-input>
                                                                <span v-else>{{character.text}}</span>
                                                                <cite @click="changeCharacter(character.id)"
                                                                      v-if="character.id !== nowEditCharacter"><i
                                                                        class="icofont icofont-pencil-alt-5"></i></cite>
                                                                <!--<el-button type="primary" plain @click="sureEditCharacter(character.id)" @click="changeCharacter(character.id)" v-if="character.id !== nowEditCharacter"><i class="icofont icofont-pencil-alt-5"></i>修改</el-button>-->
                                                                <div v-else>
                                                                    <el-button plain @click="cancelEditCharacter">取消</el-button>
                                                                    <el-button type="primary" plain
                                                                               @click="sureEditCharacter(character.id)">确认
                                                                    </el-button>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="card table-1-card">
                                                <div class="card-block">
                                                    <div class="card-header">
                                                        <h5>权限管理</h5>
                                                        <div class="button">
                                                            <button class="btn btn-round btn-warning"  @click="cancelUpdateRoleResource">
                                                                取 消
                                                            </button>
                                                            <button class="btn btn-round btn-success btn-submit"  @click="sureUpdateRoleResource">
                                                                <i class="icofont icofont-save"></i>保 存
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="El-tree">
                                                            <el-tree
                                                                    :data="navListAuth"
                                                                    show-checkbox
                                                                    node-key="id"
                                                                    ref="navTree"
                                                                    :default-expanded-keys="defaultExpandedKeys"
                                                                    :props="defaultProps"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <el-dialog
                                    title="新建角色"
                                    :visible.sync="dialogVisible"
                                    width="50%">
                                <el-form v-if="addCharacterForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                                         class="demo-ruleForm">
                                    <el-form-item label="角色名称" prop="name">
                                        <el-input v-model="ruleForm.name"></el-input>
                                    </el-form-item>
                                </el-form>
                                <span v-show="addCharacterForm" slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                                </span>
                                <el-tree v-if="addCharacterTree"
                                         :data="navListAuth"
                                         show-checkbox
                                         node-key="id"
                                         :default-expanded-keys="defaultExpandedKeys"
                                         ref="addCharacterTree"
                                         :props="defaultProps"></el-tree>
                                <span v-show="addCharacterTree" slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="saveForm">保存</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- Older IE warning message -->
    <!-- Warning Section Ends -->
    <!-- Required Jqurey -->
    <script type="text/javascript" src="/bower_components/jquery/js/jquery.min.js"></script>
    <script src="/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/bower_components/popper.js/js/popper.min.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap/js/bootstrap.min.js"></script>
    <!-- jquery slimscroll js -->
    <script type="text/javascript" src="/bower_components/jquery-slimscroll/js/jquery.slimscroll.js"></script>
    <!-- modernizr js -->
    <script type="text/javascript" src="/bower_components/modernizr/js/modernizr.js"></script>
    <script type="text/javascript" src="/bower_components/modernizr/js/css-scrollbars.js"></script>
    <!-- classie js -->
    <script type="text/javascript" src="/bower_components/classie/js/classie.js"></script>


    <!-- i18next.min.js -->
    <script type="text/javascript" src="/bower_components/i18next/js/i18next.min.js"></script>
    <script type="text/javascript" src="/bower_components/i18next-xhr-backend/js/i18nextXHRBackend.min.js"></script>
    <script type="text/javascript" src="/bower_components/i18next-browser-languagedetector/js/i18nextBrowserLanguageDetector.min.js"></script>
    <script type="text/javascript" src="/bower_components/jquery-i18next/js/jquery-i18next.min.js"></script>



    <!-- Bootstrap date-time-picker js -->
    <script type="text/javascript" src="/assets/pages/advance-elements/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="/assets/pages/advance-elements/bootstrap-datetimepicker.min.js"></script>
    <!-- Date-range picker js -->
    <script type="text/javascript" src="/bower_components/bootstrap-daterangepicker/js/daterangepicker.js"></script>
    <!-- Date-dropper js -->
    <script type="text/javascript" src="/bower_components/datedropper/js/datedropper.min.js"></script>
    <!-- Custom js -->
    <script type="text/javascript" src="/assets/pages/advance-elements/custom-picker.js"></script>
    <script type="text/javascript" src="/assets/js/script.js"></script>
    <script src="/assets/js/pcoded.min.js"></script>
    <!-- pcmenu js -->
    <script src="/assets/js/pcoded.min.js"></script>
    <script src="/assets/js/demo-12.js"></script>
    <script src="/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="/assets/js/jquery.mousewheel.min.js"></script>
    <!-- datatables -->
    <script src="/bower_components/datatable/jquery.dataTables.min.js"></script>
    <script src="/bower_components/datatable/dataTables.buttons.min.js"></script>
    <script src="/bower_components/datatable/jszip.min.js"></script>
    <script src="/bower_components/datatable/pdfmake.min.js"></script>
    <script src="/bower_components/datatable/vfs_fonts.js"></script>
    <script src="/bower_components/datatable/buttons.html5.min.js"></script>
    <!-- vue -->
    <script src="/assets/js/vue/vue.min.js"></script>
    <script src="/assets/js/vue/element.js"></script>
    <!-- pages -->
    <script src="/assets/js/pages/common.js"></script>
    <script src="/assets/js/pages/systemsetup/permissions.js"></script>
</body>

</html>